  /*
        *  公式:  小图/大图=小区域/大区域
        *   只能修改小区域
        *   小区域=(小图/大图)*大区域
        * */

       $(window).load(function(){
        var $smallImg = $(".smlimg"); // 小图片
        var $smallArea = $(".smlArea");//小区域
        var $bigArea = $(".bigArea");//大区域
        var $bigImg = $(".bigimg");//大图

        $smallArea.height(($smallImg.height() / $bigImg.height()) * $bigArea.height());
        $smallArea.width(($smallImg.width() / $bigImg.width()) * $bigArea.width());
        // 进入小图,让小区域显示
        $smallImg.on("mouseenter",function(){
            $smallArea.show();
            $bigArea.show();
        }).on("mousemove",function(evt){
            var x=evt.pageX;
            var y=evt.pageY

            var moveX=x- $(this).offset().left-$smallArea.width()/2;
            var moveY=y- $(this).offset().top-$smallArea.height()/2;

            if(moveX<=0){
                moveX=0;
            }else if(moveX>=$smallImg.width()-$smallArea.width()){
                moveX=$smallImg.width()-$smallArea.width();
            }

            if(moveY<=0){
                moveY=0;
            }else if(moveY>=$smallImg.height()-$smallArea.height()){
                moveY=$smallImg.height()-$smallArea.height();
            }
            //
           var scale=$bigArea.height()/$smallArea.height()

            $bigImg.css({
                left:scale*moveX*-1,
                top:scale*moveY*-1
            })

            $smallArea.css({
                left:moveX,
                top:moveY
            });

        })
        $smallImg.on("mouseleave",function(){
            $smallArea.hide();
            $bigArea.hide();
        })
    })